<template>
  <div class="common-layout">
    <!--   头部开始   -->
    <el-header id="top">
      <img src="/imgs/ninja/con_top.jpg" width="100%" height="298" alt="">
      <div class="page-head">
        <p>
          <router-link to="/" style="text-decoration: none;  color: #fff2d7;">官网首页 > </router-link>
          <span style="color: #fff2d7;">忍者站</span>
        </p>
        <img src="/imgs/ninja/rz-title.png" alt="">
      </div>
    </el-header>
    <!--   头部结束   -->

    <!--   轮播图开始   -->
    <div id="banner">
      <el-carousel style=" width: 1367px; height: 493px; margin: 15px auto 0px; border-radius: 10px; " :interval="5000"
                   arrow="never">
        <el-carousel-item v-for="i in 3" style="width: 1367px; display:block;margin: 0 auto; height: 493px; ">
          <img :src="'/imgs/ninja/banner'+i+'.jpg'" height="100%;" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--   轮播图结束   -->

    <!--  搜索筛选模块开始    -->
    <div id="search">

      <el-row :gutter="10">
        <el-col :span="2" style=" height:40px;display: flex;align-items: center; font-size: 28px;color: #7a6448;font-weight: bold;">
          <span class="bg icon_edit db">手里剑</span>
          <h5>关键词</h5>
        </el-col>
        <el-col :span="20" style="padding-left: 20px;">
          <el-input placeholder="请输入忍者关键词"
                    style="color: #a69a8b; height: 40px; border: 1px solid #9a8366;border-radius: 5px;"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button  class="but_cl" >清除筛选</el-button>
        </el-col>
      </el-row>


      <el-row :gutter="10" style="margin-top: 20px; padding: 0; height: 40px;">
        <el-col :span="10" style="height: 40px;font-size: 28px;color: #7a6448; font-weight: bold;display: flex; align-items: center;">
          <span class="bg icon_edit db">手里剑</span>
          <h5 style="margin-right: 7px;">忍者品级</h5>
          <el-button class="but_st">S</el-button>
          <el-button class="but_st">A</el-button>
          <el-button class="but_st">B</el-button>
          <el-button class="but_st">C</el-button>
        </el-col>

        <el-col :span="14" style="height: 40px;font-size: 28px;color: #7a6448; font-weight: bold; display: flex; align-items: center;">
          <span class="bg icon_edit db">手里剑</span>
          <h5 style="margin-right: 7px;">其他</h5>
          <el-button class="but_st">男</el-button>
          <el-button class="but_st">女</el-button>
          <el-button class="but_st">异装忍者</el-button>
        </el-col>
      </el-row>

      <el-row :gutter="10" style="margin-top: 15px;">
        <el-col :span="24" style=" height:40px;display: flex;align-items: center; font-size: 28px;color: #7a6448;font-weight: bold;">
          <span class="bg icon_edit db">手里剑</span>
          <h5>忍者定位</h5>
        </el-col>
      </el-row>

      <!--   筛选属性   -->
      <el-button v-for="i in r_positionArr1" class="ul_but">
        {{i}}
      </el-button>
    </div>
    <!--  搜索筛选模块结束    -->

    <!--  全部忍者导航开始  -->
    <div class="all_ninja">
      <!--  左侧   -->
      <div class="all_l">
        <a href="#" class="al">全部忍者</a>
        <a href="#" class="ar">我的忍者</a>
      </div>
      <!--   右侧   -->
      <div class="all_r">
        <a href="#"><span>品级</span><i class="icon_px db">-</i></a>
        <a href="#"><span>名称</span><i class="icon_px db">-</i></a>
        <a href="#"><span class="lass_span">上线时间</span><i class="icon_px db">-</i></a>
      </div>
    </div>
    <!--  全部忍者导航结束  -->


    <!-- 忍者卡片展示开始 -->
    <el-row :gutter="10" style="width: 1400px; margin: 40px auto 0px; padding: 0 30px;">
      <el-col :span="3" v-for="i in ninja_arr" :key="i.f_name" >
        <div class="el_card" >
          <a href="#" class="card_st">
            <img :src="i.imgUrl" style="width: 136px;height: 136px; display: block; border-radius: 15px;"/>
          </a>
        </div>
        <div style=" width: 142px; color: #604e38; font-size: 18px;  text-align: center;">{{i.f_name}}</div>
        <div style=" width: 142px; color: #604e38; font-size: 18px;  text-align: center;margin: 0 0 15px 0;">{{i.s_name}}</div>
      </el-col>
    </el-row>

    <!--  底部翻页开始  -->
    <div class="footer_page">
      <div style="margin-left: 650px;padding: 0 18px; color: #604e38">
        <span style="color: red">1 </span>/ 15
      </div>
      <a href="#" class="next_one"></a>
      <a href="#" class="next_all"></a>
    </div>
    <!--  底部翻页结束  -->
    <!-- 忍者卡片展示结束 -->

  </div>




</template>
<script setup>

import {ref} from "vue";

/*筛选属性*/
const r_positionArr1 = ref(["高伤害", "高连击", "高爆发", "起手强", "高灵活", "范围大", "控制强", "难度高", "突进", "抓取", "霸体", "施放快", "多技能形态", "特殊机制", "无敌", "格挡", "扫地", "持续伤害", "隐身"]);

const ninja_arr = ref([
  {imgUrl:'/imgs/ninja/ap_1.png',f_name:'波风水门',s_name:'「百战」'},
  {imgUrl:'/imgs/ninja/ap_2.png',f_name:'漩涡鸣人',s_name:'「九喇嘛连结」'},
  {imgUrl:'/imgs/ninja/ap_3.png',f_name:'艾',s_name:'「青年」'},
  {imgUrl:'/imgs/ninja/rz_4.png',f_name:'佩恩',s_name:'「畜生道」'},
  {imgUrl:'/imgs/ninja/rz_5.png',f_name:'漩涡玖辛奈',s_name:''},
  {imgUrl:'/imgs/ninja/ap_4.png',f_name:'迈特凯',s_name:''},
  {imgUrl:'/imgs/ninja/ap_7.png',f_name:'我爱罗',s_name:'「新春限定」'},
  {imgUrl:'/imgs/ninja/ap_6.png',f_name:'大和',s_name:'「新春限定」'},
  {imgUrl:'/imgs/ninja/ap_7.png',f_name:'千手柱间',s_name:'「木叶创立」'},
  {imgUrl:'/imgs/ninja/ap_8.png',f_name:'萨姆伊',s_name:'「新春限定」'},
  {imgUrl:'/imgs/ninja/ap_9.png',f_name:'宇智波佐助',s_name:'「永恒万花筒」'},
  {imgUrl:'/imgs/ninja/ap_10.png',f_name:'日向花火',s_name:'「冬日限定」'},
  {imgUrl:'/imgs/ninja/ap_11.png',f_name:'鬼灯满月',s_name:'「忍刀七人众」'},
  {imgUrl:'/imgs/ninja/ap_12.png',f_name:'不缘',s_name:''},
  {imgUrl:'/imgs/ninja/ap_13.png',f_name:'长十郎',s_name:'「六代目水影」'},
  {imgUrl:'/imgs/ninja/ap_14.png',f_name:'宇智波鼬',s_name:'「红夜之刃」'},
  {imgUrl:'/imgs/ninja/ap_15.png',f_name:'纲手',s_name:'「侠隐江湖」'},
  {imgUrl:'/imgs/ninja/ap_16.png',f_name:'漩涡鸣人',s_name:'「中秋限定」'},
  {imgUrl:'/imgs/ninja/ap_17.png',f_name:'神秘面具男',s_name:'「红夜之刃」'},
  {imgUrl:'/imgs/ninja/ap_18.png',f_name:'春野樱',s_name:'「忍界大战」'},
  {imgUrl:'/imgs/ninja/ap_19.png',f_name:'尤鲁伊',s_name:''},
  {imgUrl:'/imgs/ninja/ap_20.png',f_name:'贰',s_name:'「火之意志继承者」'},
  {imgUrl:'/imgs/ninja/ap_21.png',f_name:'卑留呼',s_name:'「火之意志继承者」'},
  {imgUrl:'/imgs/ninja/ap_22.png',f_name:'山中风',s_name:''}
])

</script>


<style scoped>

body,ul,ol,li,a{
  padding: 0;
  margin: 0;
  text-decoration: none;
  color: #000;
}
body{
  background-image: url("../../public/imgs/ninja/bg_big.jpg");
}

.common-layout {
  min-width: 1400px;
  padding: 0;
  margin: 0;

}

#top {
  margin: 0 auto;
  height: 298px;
  position: relative;
}

#top img {
  max-width: 100%;
  /*保持 1920:298 的宽高比*/
  aspect-ratio: auto 1920 / 298;
  margin: 0 auto;
}

.page-head {
  width: 1000px;
  height: 298px;
  left: 50%;
  top: 0;
  position: absolute;
  color: #fff;
  margin-left: -500px;
}

.page-head > p, .page-head > img {
  position: absolute;
  right: 0;
}

.page-head > p {
  top: 28px;
  font-size: 18px;
}

.page-head > img {
  top: 110px;
}

/*banner 样式*/

#banner {
  width: 1400px;
  height: 520px;
  margin: 60px auto 0;
  background-image: url("../../public/imgs/ninja/banner_border.png");
  background-repeat: no-repeat;
  overflow: hidden;
  background-size: 100% 520px;

}

/*搜索样式*/
#search {
  width: 1400px;
  height: 366px;
  margin: 60px auto 0;
  background-image: url("../../public/imgs/ninja/search_bg.jpg");
  background-repeat: no-repeat;
  padding: 50px 30px;
  box-sizing: border-box;
}


/*手里剑icon*/
.icon_edit{
  width: 23px;
  height: 24px;
  display: block;
  background-position: -7px -5px;
  margin-right: 5px;
}

.but_st{
  font-size:18px;
  color:#7a6448;
  border-radius: 5px;
  border:1px solid #604e38;
  height: 40px;
  padding:0 24px;
}
.but_st:hover{
  background-color: rgba(122,100,72,0.3);
}

.ul_but{
  height: 40px;
  font-size: 18px;
  color: #604e38;
  margin: 15px 16px 6px  0px;
  padding: 0 24px;
  border-radius: 5px;
  border:1px solid #604e38;
}
.ul_but:hover{
  background-color: rgba(122,100,72,0.3);
}
.but_cl{
  height: 40px;
  color: #9f2626;
  float: right;
  border: 1px solid #9F2626FF;
}
.but_cl:hover{
  background-color: transparent;
}






.bg{
  background-image: url("../../public/imgs/ninja/icon_bg.png");
  background-repeat: no-repeat;
}


/*icon的统一样式*/
.db{
  text-indent: -999em;
}



/*全部忍者 开始*/
.all_ninja a{
  width: 130px;
  height: 42px;
  color: #fff;
  font-size: 20px;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
}


.all_ninja{
  width: 1400px;
  height: 42px;
  margin: 50px auto 0;
  //background-color: #42b983;
  line-height: 42px;
  padding: 0 30px;
  box-sizing: border-box;
}

.all_ninja>.all_l{
  float: left;
}
.all_ninja>.all_r{
  float: right;
}

.all_ninja>.all_l>a{
  background-image: url("../../public/imgs/ninja/icon_bg.png");
  background-repeat: no-repeat;
  background-position: -6px -53px
}
.all_ninja>.all_l>.ar{
  margin-left: 50px;
  color: #7A6448;
}
.all_ninja>.all_l>.ar:hover{
  background-position: -141px -53px;
  color: #fff;
}
.all_ninja>.all_l>.al{
  background-position: -141px -53px
}

/*右边 品级 名称 上线时间*/
.all_ninja>.all_r>a{
  width: 100px;
  display: flex;
  align-items: center;
}
.all_ninja>.all_r>a:last-child{
  width: 120px;
}

.all_ninja>.all_r>a>span{
  float: left;
  width:50px;
  color: #7A6448;
}
.all_ninja>.all_r>a:hover>span{
  border-bottom: 3px solid crimson;
  color: #EE7906;

}
.all_ninja>.all_r>a:hover>.icon_px{
  background-position: -595px -7px;
}

.all_ninja>.all_r>a>.lass_span{
  width: 120px;
}
.all_ninja>.all_r>a>.icon_px{
  width: 14px;
  height: 15px;
  display: block;
  margin-left: 6px;
  background-image: url("../../public/imgs/ninja/icon_bg.png");
  background-repeat: no-repeat;
  background-position: -576px -7px;
}
.el_card{
  width: 142px;
  height:142px;
  margin-bottom: 10px;
  background-color: transparent;
  box-shadow:none;
  border:none;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}
.el_card:hover{
  transform: scale(1.1);
}
.card_st{
  width: 142px;
  height: 142px;
  padding: 3px;
  box-sizing: border-box;
  display: block;
  background-image: url("../../public/imgs/ninja/rz_bg.png");
/* 添加过渡效果 */
}



/*翻页*/
.footer_page{
  width: 1400px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  align-items: center;
}
.footer_page>.next_one,
.footer_page>.next_all{
  width: 38px;
  height: 38px;
  display: block;
  background-image: url("../../public/imgs/ninja/icon_bg.png");
}
.footer_page>.next_one {
  background-position: -744px -3px;
  margin-right: 13px;
}
.footer_page>.next_all{
  background-position: -795px -3px;
}

.footer_page>.next_one:hover {
  background-position: -383px -35px;
}
.footer_page>.next_all:hover{
  background-position: -434px -35px;
}

/*全部忍者结束*/
</style>






















